<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import router from "@/router";

const user = ref(getUser());

const fileList = ref([]);
const dialogImageUrl = ref('');
const dialogVisible = ref(false);
//定义变量用来保存图片上传给哪个后端接口地址
const actionUrl = ref(BASE_URL + '/file/upload');
//移除图片
const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
  //1.得到要删除的图片路径 uploadFile就是我们要删除的那个图片文件对象
  let imgUrl = uploadFile.response.data;
  //2.给后端发请求,删除图片
  axios.post(BASE_URL + '/file/remove?imgUrl=' + imgUrl)
      .then((response) => {
        if (response.data.code == 2000) {
          ElMessage.success('删除成功!');
        }
      })
}
//图片上传后预览
const handlePictureCardPreview = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url
  dialogVisible.value = true;
  console.log(uploadFile);
  //console.log(fileList.value[0].response.data);
}

onMounted(() => {
  console.log(user.value);

  console.log(fileList.value);
})

const update = () => {
  if (fileList.value.length != 0) {
    user.value.avatar = fileList.value[0].response.data;
  }
  console.log(user.value);
  console.log(fileList.value);

  axios.post(BASE_URL + '/user/save', user.value).then((response) => {
    if (response.data.code == 2000) {
      // localStorage.setItem('user', JSON.stringify(response.data.data));
      router.push('/login');
      ElMessage.success("请重新登录!");
    } else
      ElMessage.error(response.data.msg);
  })
}
</script>

<template>
  <el-form style="width:500px;margin: 0 auto;" label-width="80">
    <el-form-item label="用户名">
      <el-input placeholder="请输入用户名" v-model="user.username"></el-input>
    </el-form-item>
    <el-form-item label="密码">
      <el-input placeholder="请输入密码" show-password v-model="user.password"></el-input>
    </el-form-item>
    <el-form-item label="邮箱">
      <el-input placeholder="请输入邮箱" v-model="user.email"></el-input>
    </el-form-item>
    <el-form-item label="手机号">
      <el-input placeholder="请输入手机号" v-model="user.phone"></el-input>
    </el-form-item>

    <el-form-item label="头像">
      <img :src="BASE_URL+user.avatar" style="width:150px;" v-if="fileList.length==0">
      <el-upload
          v-model:file-list="fileList"
          v-model:action="actionUrl"
          name="file"
          limit="1"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
      >
        <el-icon>
          <Plus/>
        </el-icon>
      </el-upload>
      <el-dialog v-model="dialogVisible">
        <img w-full :src="dialogImageUrl"/>
      </el-dialog>
    </el-form-item>

    <el-form-item label="昵称">
      <el-input placeholder="请输入昵称" v-model="user.nickname"></el-input>
    </el-form-item>
    <el-form-item label="性别">
      <el-radio-group v-model="user.gender">
        <el-radio border label="男" :value=1 style="margin:0;"></el-radio>
        <el-radio border label="女" :value=0></el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item>
      <el-button type="success" @click="update">点我修改</el-button>
    </el-form-item>
  </el-form>
  <div style="height: 100px;"></div>
</template>

<style scoped>

</style>